<template>
  <div class="nf-wrap">
    <h1 class="nf-sign">{{ sign }}</h1>
    <div class="nf-tips">抱歉，你访问的页面不存在</div>
    <el-button type="primary" size="large" color="#222" @click="toHome">
      回到首页
    </el-button>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
interface INotFound {
  sign?: string;
}
const { sign = "404" } = defineProps<INotFound>();
const router = useRouter();
const toHome = () => {
  router.replace("/");
};
</script>

<style lang="less" scoped>
@color: #3ba962;

.nf-wrap {
  padding: 4rem 2rem;
  text-align: center;

  .nf-sign {
    font-size: 150px;
    color: #008b62;
    text-shadow: 1px 1px 1px #00593e, 2px 2px 1px #00593e, 3px 3px 1px #00593e,
      4px 4px 1px #00593e, 5px 5px 1px #00593e, 6px 6px 1px #00593e,
      7px 7px 1px #00593e, 8px 8px 1px #00593e, 25px 25px 8px rgba(0, 0, 0, 0.2);
  }

  .nf-tips {
    margin: 2rem 0;
    font-size: 20px;
    font-weight: 600;
    color: #444;
  }
}
</style>
